<template>
  <view class="container">
    <!-- 用户信息 -->
    <view v-if="isAuthInfo" class="userinfo">
      <view class="userinfo-con">
        <view class="userinfo-avatar">
          <image
            :src="
              loginResult.pic
                ? loginResult.pic.indexOf('http') === -1
                  ? picDomain + loginResult.pic
                  : loginResult.pic
                : '/static/images/icon/head04.png'
            "
          />
        </view>
        <view class="userinfo-name">
          <view>{{
            loginResult.nickName ? loginResult.nickName : "用户昵称"
          }}</view>
        </view>
      </view>
    </view>

    <view v-if="!isAuthInfo" class="userinfo-none">
      <view class="default-pic" @tap="toLogin">
        <image src="@/static/images/icon/head04.png" />
      </view>
      <view class="none-login" @tap="toLogin">
        <button class="unlogin">未登录</button>
        <button class="click-login">点击登录账号</button>
      </view>
    </view>
    <!-- end 用户信息 -->

    <!-- 我的设计 -->
    <view class="my-designs">
      <view class="designs-header">
        <text style="font-weight: bold">我的设计</text>
        <view class="check-more" @tap="checkAllDesigns">
          <text>查看全部</text>
          <text class="arrowhead" />
        </view>
      </view>
      <view class="designs-list">
        <view
          v-for="(design, index) in designList"
          :key="index"
          class="design-item"
          @tap="viewDesign(design)"
        >
          <image
            :src="design.preview || '/static/images/default-design.png'"
            mode="aspectFill"
          />
        </view>
        <view v-if="designList.length === 0" class="no-designs">
          <text>暂无设计作品</text>
        </view>
      </view>
    </view>
    <!-- end 我的设计 -->

    <!-- 我的服务 -->
    <view class="my-services">
      <view class="service-title">
        <text style="font-weight: bold">我的服务</text>
      </view>
      <view class="service-grid">
        <view
          class="service-item"
          @tap="toOrderListPage({ currentTarget: { dataset: { sts: '0' } } })"
        >
          <!-- <image src="@/static/images/icon/order.png" /> -->
          <text>订单</text>
          <view v-if="orderAmount.total > 0" class="service-badge">{{
            orderAmount.total > 99 ? "99+" : orderAmount.total
          }}</view>
        </view>
        <view class="service-item" @tap="handleTips">
          <!-- <image src="@/static/images/icon/feedback.png" /> -->
          <text>我的反馈</text>
          <view class="service-badge">!</view>
        </view>
        <view class="service-item" @tap="handleTips">
          <!-- <image src="@/static/images/icon/service.png" /> -->
          <text>联系客服</text>
        </view>
        <view class="service-item" @tap="handleTips">
          <!-- <image src="@/static/images/icon/about.png" /> -->
          <text>关于我们</text>
          <view class="service-badge">!</view>
        </view>
      </view>
    </view>
    <!-- end 我的服务 -->

    <view v-if="isAuthInfo" class="log-out" @tap="logout">
      <view class="log-out-n">
        <text>退出登录</text>
      </view>
    </view>
  </view>
  <custom-tabbar :currentTab="currentTab" @tabChange="handleTabChange" />
</template>

<script setup>
import { ref } from "vue";
import CustomTabbar from "@/components/custom-tabbar/index.vue";
const picDomain = import.meta.env.VITE_APP_RESOURCES_URL;

// tab状态管理
const currentTab = ref("user");

// 处理tab切换
const handleTabChange = (tab) => {
  currentTab.value = tab;
};

const isAuthInfo = ref(false);
const loginResult = ref("");
const orderAmount = ref("");
const designList = ref([]);

/**
 * 获取设计稿列表
 */
const getDesignList = () => {
  if (!isAuthInfo.value) return;
  uni.showLoading({
    title: "加载中",
    mask: true,
  });

  // 使用提供的接口获取设计稿数据
  http
    .request({
      url: "/p/faceDesign/page",
      method: "GET",
      data: {
        userId: "user123",
        page: 1,
        limit: 10,
        status: 1,
      },
    })
    .then(({ data }) => {
      console.log(data);

      if (data.records) {
        // 假设接口返回的数据格式为 {code: 0, data: {records: [...]}}
        designList.value = data.records || [];
      } else {
      }
    })
    .catch((err) => {
    })
    .finally(() => {
      uni.hideLoading();
    });
};

/**
 * 生命周期函数--监听页面显示
 */
onShow(() => {
  uni.hideTabBar();
  // 设置当前tab
  currentTab.value = "user";
  loginResult.value = uni.getStorageSync("loginResult");
  isAuthInfo.value = !!loginResult.value;
  // 加载订单数字
  if (isAuthInfo.value) {
    uni.showLoading();
    http
      .request({
        url: "/p/myOrder/orderCount",
        method: "GET",
        data: {},
      })
      .then(({ data }) => {
        uni.hideLoading();
        orderAmount.value = data;
      });
    showCollectionCount();
    getDesignList();
  }
});

const toDistCenter = () => {
  uni.showToast({
    icon: "none",
    title: "该功能未开源",
  });
};
const toCouponCenter = () => {
  uni.showToast({
    icon: "none",
    title: "该功能未开源",
  });
};
const toMyCouponPage = () => {
  uni.showToast({
    icon: "none",
    title: "该功能未开源",
  });
};
const handleTips = () => {
  uni.showToast({
    icon: "none",
    title: "该功能未开源",
  });
};
const toAddressList = () => {
  uni.navigateTo({
    url: "/pages/delivery-address/delivery-address",
  });
};

const toOrderListPage = (e) => {
  const sts = e.currentTarget.dataset.sts;
  uni.navigateTo({
    url: "/pages/orderList/orderList?sts=" + sts,
  });
};

const collectionCount = ref(0);
/**
 * 查询所有的收藏量
 */
const showCollectionCount = () => {
  uni.showLoading();
  http
    .request({
      url: "/p/user/collection/count",
      method: "GET",
      data: {},
    })
    .then(({ data }) => {
      uni.hideLoading();
      collectionCount.value = data;
    });
};

/**
 * 我的收藏跳转
 */
const myCollectionHandle = () => {
  let url = "/pages/prod-classify/prod-classify?sts=5";
  const id = 0;
  const title = "我的收藏商品";
  if (id) {
    url += "&tagid=" + id + "&title=" + title;
  }
  uni.navigateTo({
    url,
  });
};

/**
 * 查看全部设计
 */
const checkAllDesigns = () => {
  // 跳转到设计列表页面，如果有的话
  uni.showToast({
    title: "查看全部设计",
    icon: "none",
  });
};

/**
 * 查看单个设计详情
 */
const viewDesign = (design) => {
  // 跳转到设计详情页面
  uni.showToast({
    title: `查看设计ID: ${design.id}`,
    icon: "none",
  });
};

/**
 * 去登陆
 */
const toLogin = () => {
  uni.navigateTo({
    url: "/pages/accountLogin/accountLogin",
  });
};

/**
 * 退出登录
 */
const logout = () => {
  http
    .request({
      url: "/logOut",
      method: "post",
    })
    .then(() => {
      // util.removeTabBadge()
      uni.removeStorageSync("loginResult");
      uni.removeStorageSync("token");
      uni.showToast({
        title: "退出成功",
        icon: "none",
      });
      orderAmount.value = "";
      setTimeout(() => {
        uni.switchTab({
          url: "/pages/index/index",
        });
      }, 1000);
    });
};
</script>

<style scoped lang="scss">
@use "./user.scss";
/* 为自定义tabBar留出空间 */
.container {
  padding-bottom: 120rpx;
}

/* 我的设计样式 */
.my-designs {
  background-color: #fff;
  margin: 20rpx 0;
  padding: 30rpx;
  border-radius: 10rpx;

  .designs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .check-more {
      display: flex;
      align-items: center;
      color: #999;
      font-size: 28rpx;

      .arrowhead {
        width: 16rpx;
        height: 16rpx;
        border-top: 2rpx solid #999;
        border-right: 2rpx solid #999;
        transform: rotate(45deg);
        margin-left: 8rpx;
      }
    }
  }

  .designs-list {
    display: flex;
    overflow-x: auto;
    padding-bottom: 10rpx;

    &::-webkit-scrollbar {
      display: none;
    }

    .design-item {
      width: 180rpx;
      height: 180rpx;
      margin-right: 20rpx;
      border-radius: 10rpx;
      overflow: hidden;
      flex-shrink: 0;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .no-designs {
      width: 100%;
      text-align: center;
      color: #999;
      font-size: 28rpx;
      padding: 40rpx 0;
    }
  }
}

/* 我的服务样式 */
.my-services {
  background-color: #fff;
  margin: 20rpx 0;
  padding: 30rpx;
  border-radius: 10rpx;

  .service-title {
    margin-bottom: 30rpx;
  }

  .service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;

    .service-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      image {
        width: 70rpx;
        height: 70rpx;
        margin-bottom: 15rpx;
      }

      text {
        font-size: 28rpx;
        color: #333;
      }

      .service-badge {
        position: absolute;
        top: -10rpx;
        right: 20rpx;
        background-color: #ff4d4f;
        color: #fff;
        font-size: 20rpx;
        padding: 2rpx 10rpx;
        border-radius: 20rpx;
        min-width: 30rpx;
        text-align: center;
      }
    }
  }
}
</style>
